<template>
  <div class="m-page">
    <m-header title="佛山照明车灯SMT看板"></m-header>
    <div class="m-body" v-if="showScreen">
      <m-row :gutter="20" class="content">
        <m-col :span="5" class="page-left">
          <m-row :gutter="20">
            <m-col :span="24">
              <m-box title="当日产线">
                <ProductionLine ref="productionLineRef" :total="dailyProduction" :options="workcenterOpts" @change="workcenterChange" />
              </m-box>
            </m-col>
          </m-row>
          <m-row :gutter="20">
            <m-col :span="24">
              <m-box title="当班人员信息">
                <PersonInfo ref="personInfoRef" :info="personForm" />
              </m-box>
            </m-col>
          </m-row>
        </m-col>

        <m-col :span="10" class="page-center">
          <m-row :gutter="20">
            <m-col :span="24">
              <m-box title="每日直通率">
                <DailyDirectPassRate ref="dailyDirectPassRateRef" :data="dailyPassRateList" />
              </m-box>
            </m-col>
            <m-col :span="24">
              <m-box title="贴片低水位预警">
                <LowWaterLevelEchart ref="lowWaterLevelEchartRef" :data="warnList" :loading="lowWaterLevelEchartLoading" />
              </m-box>
            </m-col>
            <m-col :span="24">
              <m-box title="在制订单列表">
                <OrderList ref="orderListRef" :list="moList" :loading="orderListLoading" />
              </m-box>
            </m-col>
          </m-row>
        </m-col>

        <m-col :span="9" class="page-right">
          <m-row :gutter="20">
            <m-col :span="24">
              <m-box title="设备OEE综合率">
                <EquipmentOEE />
              </m-box>
            </m-col>
            <m-col :span="24">
              <m-box title="每小时UPPH">
                <OutputPerHourEchart ref="outputPerHourEchart" :data="upphList" :loading="outputPerHourEchartLoading" />
              </m-box>
            </m-col>
            <m-col :span="24">
              <m-box title="抛料率">
                <ThrowingMaterialEchart ref="throwingMaterialEchartRef" :data="throwingRateList" :loading="throwingMaterialEchartLoading" />
              </m-box>
            </m-col>
          </m-row>
        </m-col>
      </m-row>
  </div>
  </div>
</template>

<script setup>
import { getCurrentInstance, onUnmounted } from 'vue'
import { useFullScreenStore } from '@/stores/fullScreen'
import mHeader from '@/components/common/mHeader/index.vue'

import DailyDirectPassRate from "@/views/ProductionLineBoard/components/dailyDirectPassRate/index.vue"
import EquipmentOEE from "@/views/ProductionLineBoard/components/equipmentOEE/index.vue"
import OrderList from "@/views/ProductionLineBoard/components/orderList/index.vue"
import ProductionLine from "@/views/ProductionLineBoard/components/productionLine/index.vue"
import PersonInfo from "@/views/ProductionLineBoard/components/personInfo/index.vue"
import OutputPerHourEchart from "@/views/ProductionLineBoard/components/outputPerHourEchart/index.vue"
import ThrowingMaterialEchart from "@/views/ProductionLineBoard/components/throwingMaterialEchart/index.vue"
import LowWaterLevelEchart from "@/views/ProductionLineBoard/components/lowWaterLevelEchart/index.vue"

import http from '@/utils/request'
import Ms from "@/utils/hooks" // 对应 element-plus 的 message、messageBox、notification

// 获取 页面实例
const _this = getCurrentInstance()
// 是否全屏
const fsStore = useFullScreenStore()

// API
const service = {
  // API_GET_WORKCENTER: "workcenter/gettree", // 产线 keyword
  API_GET_WORKCENTER: "v1/kanban/andon/getLine", // 产线 keyword
  API_GET_PERSON: "v1/kanban/andon/getCurrentPerson", // 人员信息
  API_GET_TODAYLINESUMMARY: "v1/kanban/andon/getTodayLineSummary", // 当日产量
  API_GET_CURPASSRATE: "v1/kanban/andon/getCurPassRate", // 直通率
  API_GET_SMTWARNING: "v1/kanban/andon/getSmtWarning", // 低水位预警
  API_GET_MO: "v1/kanban/andon/getMosByLineCode", // 订单列表
  API_GET_UPPH: "v1/kanban/andon/getHourUpph", // 每小时UPPH
  API_GET_THROWINGRATE: "v1/kanban/andon/getThrowingRate", // 抛料率
}

// 变量
const showScreen = ref(true) // 是否全屏
const workcenterOpts = ref([]) // 产线【选项】
const curWorkcenterCode = ref("") // 当前产线
const personList = ref([]) // 人员列表
const dailyProduction = ref(0) // 当日产量
const personForm = ref({}) // 人员信息
const dailyPassRateList = ref([]) // 当日直通率
const moList = ref([]) // 订单列表
const warnList = ref([]) // 低水位预警
const upphList = ref([]) // upph列表
const throwingRateList = ref([]) // 抛料率列表

const lowWaterLevelEchartLoading = ref(false) // 是否正在获取低水位预警
const orderListLoading = ref(false) // 是否正在获取订单列表
const outputPerHourEchartLoading = ref(false) // 是否正在获取upph列表
const throwingMaterialEchartLoading = ref(false) // 是否正在获取抛料率


// refs
const productionLineRef = ref(null)


// 页面是否可显示 默认：true
watch(
  () => fsStore.isFullScreen,
  (n) => {
    showScreen.value = false
    setTimeout(() => {
      showScreen.value = true
      const _curWorkcenterCode = curWorkcenterCode.value
      const _dailyPassRateList = JSON.parse(JSON.stringify(dailyPassRateList.value))
      dailyPassRateList.value = []
      setTimeout(() => {
        // 重新赋值到
        dailyPassRateList.value = _dailyPassRateList
        productionLineRef.value.setValue(_curWorkcenterCode)
      }, 300)
    }, 30)
  }
)

// 获取产线【选项】
async function getWorkcenterOpts() {
    try {
    // 获取产线【选项】
    // const workcenterResp = await http.get(service.API_GET_WORKCENTER, { keyword: "" })
    // workcenterOpts.value = workcenterResp.data.filter(r => r.WORKCENTER_TYPE === "LINE").map(r => { return { ...r, label: r.WORKCENTER_NAME, value: r.WORKCENTER_CODE } })
    const workcenterResp = await http.get(service.API_GET_WORKCENTER, {})
    workcenterOpts.value = workcenterResp.data.map(r => { return { ...r, label: r.LINE_NAME, value: r.LINE_CODE } })
    if (workcenterOpts.value.length > 0) {
      // const value = workcenterOpts.value[0].value
      const value = workcenterOpts.value[workcenterOpts.value.length - 1].value
      productionLineRef.value.select(value)
    }
  } catch (e) {
    console.error(e)
  }
}

// 获取人员信息
async function getPersonList() {
  try {
    const resp = await http.get(service.API_GET_PERSON, { lineCode: curWorkcenterCode.value }, { autoTip: false })
    personForm.value = resp.data[0]
  } catch (e) {
    console.error(e)
    Ms.message(e.message ? e.message.content : e.statusText)
  }
}

// 获取当日产量
async function getTodayLineSummary() {
  try {
    const resp = await http.get(service.API_GET_TODAYLINESUMMARY, { lineCode: curWorkcenterCode.value }, { autoTip: false })
    dailyProduction.value = resp.data
  } catch (e) {
    console.error(e)
    Ms.message(e.message ? e.message.content : e.statusText)
  }
}

// 获取当日直通率
async function getCurPassRate() {
  try {
    const resp = await http.get(service.API_GET_CURPASSRATE, { lineCode: curWorkcenterCode.value }, { autoTip: false })
    dailyPassRateList.value = resp.data
  } catch (e) {
    console.error(e)
    Ms.message(e.message ? e.message.content : e.statusText)
  }
}

// 获取贴片低水位预警
async function getWarnList() {
  lowWaterLevelEchartLoading.value = true
  try {
    const resp = await http.get(service.API_GET_SMTWARNING, { lineCode: curWorkcenterCode.value }, { autoTip: false })
    warnList.value = resp.data
  } catch (e) {
    console.error(e)
    Ms.message(e.message ? e.message.content : e.statusText)
  } finally {
    lowWaterLevelEchartLoading.value = false
  }
}

// 获取工单列表
async function getMoList() {
  orderListLoading.value = true
  try {
    const resp = await http.get(service.API_GET_MO, { lineCode: curWorkcenterCode.value }, { autoTip: false })
    moList.value = resp.data
  } catch (e) {
    console.error(e)
    Ms.message(e.message ? e.message.content : e.statusText)
  } finally {
    orderListLoading.value = false
  }
}

// 获取每小时UPPH
async function getUpphList() {
  outputPerHourEchartLoading.value = true
  try {
    const resp = await http.get(service.API_GET_UPPH, { lineCode: curWorkcenterCode.value }, { autoTip: false })
    upphList.value = resp.data
  } catch (e) {
    console.error(e)
    Ms.message(e.message ? e.message.content : e.statusText)
  } finally {
    outputPerHourEchartLoading.value = false
  }
}


// 获取抛料率
async function getThrowingRate() {
  throwingMaterialEchartLoading.value = true
  try {
    const resp = await http.get(service.API_GET_THROWINGRATE, { lineCode: curWorkcenterCode.value }, { autoTip: false })
    throwingRateList.value = resp.data
  } catch (e) {
    console.error(e)
    Ms.message(e.message ? e.message.content : e.statusText)
  } finally {
    throwingMaterialEchartLoading.value = false
  }
}


// 重新获取数据
function reload() {
  // 重新获取人员信息
  getPersonList()
  // 重新获取当日产量
  getTodayLineSummary()
  // 重新获取当日直通率
  getCurPassRate()
  // 重新获取贴片低水位预警
  getWarnList()
  // 重新获取工单列表
  getMoList()
  // 重新获取每小时UPPH
  getUpphList()
  // 重新获取抛料率
  getThrowingRate()
}

// 切换产线
function workcenterChange(val, opt) {
  curWorkcenterCode.value = val
  // 重新获取数据
  reload()
}





// 定时器
let timer = null
onMounted(() => {
  // 获取产线【选项】
  getWorkcenterOpts()

  // 10分钟刷新一次
  const dur = 1000 * 60 * 10
  timer = setInterval(() => {
    // for (let i = 0; i < _this.refs.length; i++) {
    //   const _ref = _this.refs[i]
    //   _ref.value?.init()
    // }
    reload()
  }, dur)

  window.onresize = function () {
    showScreen.value = false
    setTimeout(() => {
      showScreen.value = true
    }, 300)
  }
})
onUnmounted(() => {
  clearInterval(timer)
})
</script>
<style lang="less" scoped>
.m-page {
  ::v-deep(.m-header) {
    .m-header_box {
      .bg {
        .dv-decoration-8 {}
      }
      .title {
        width: 600px;
      }
    }
  }
  .m-body {
    .m-row {
      margin-bottom: 0;

      &.content {
        height: 100%;

        .m-col.page-left {
          height: 100%;
          padding: 0 !important;
          .m-row {
            height: 30%;
            .m-col{
              height: 100%;
              padding: 0 !important;
            }
            // .m-col:nth-child(1) {
            //   height: 100%;
            // }
          }
          .m-row:nth-child(2) {
            height: 70%;
          }
        }

        .m-col.page-center,
        .m-col.page-right {
          height: 100%;
          padding: 0 !important;
          .m-row {
            height: 100%;
            .m-col {
              padding: 0 !important;
            }
            .m-col:nth-child(1) {
              height: 30%;
            }
            .m-col:nth-child(2) {
              height: 35%;
            }
            .m-col:nth-child(3) {
              height: 35%;
            }
          }
        }
      }
    }
  }
}
</style>
